import React from 'react'

class HelloWorld extends React.Component {
  // 生命周期
  // 1、执行 constructor：
  constructor() {
    super()

    console.log('HelloWorld construstor')
    this.state = {
      msg: 'Hello World'
    }
  }

  changeMsg() {
    this.setState({
      msg: 'HelloHelloHello'
    })
  }

  // 2、执行 render 函数
  render() {
    const { msg } = this.state
    console.log('HelloWorld render')
    return (
      <div>
        <p>{msg}</p>
        <button onClick={(e) => this.changeMsg()}>点击修改文本</button>
      </div>
    )
  }

  // 3、组件被渲染到 DOM，被挂载到 DOM 上面
  componentDidMount() {
    console.log('HelloWorld componentDidMount')
  }

  // 4、组件的 DOM 被更新完成，DDM 发生更新
  componentDidUpdate() {
    console.log('HelloWorld componentDidUpdate')
  }

  // 5、组件从 DOM 中被卸载，从 DOM 中被移除
  componentWillUnmount() {
    console.log('HelloWorld componentWillUnmount')
  }
}

export default HelloWorld
